import { defineComponent, watchEffect, onUnmounted } from 'vue'
import { RouterLink } from 'vue-router'

import { useStore } from '@/store'
import useSize from '@/hooks/useSize'

import icoMessage from '@/assets/images/ico-message.jpg'
import icoSearch from '@/assets/images/ico-search.jpg'
import styles from './styles.module.less'

export default defineComponent({
  name: 'Header',
  props: { zIndex: { type: Number, default: 10 } },

  setup(props, { slots }) {
    const { layout } = useStore()
    const { elementRef, size } = useSize()

    const unWatch = watchEffect(() => {
      layout.updateLayout({ headerHeight: size.height })
    })
    onUnmounted(() => unWatch())

    return () => (
      <>
        <header ref={elementRef} class={styles.header} style={{ zIndex: props.zIndex }}>
          <RouterLink to='/messages' class={styles.aside_link}>
            <img src={icoMessage} alt='messages' />
          </RouterLink>

          {slots?.['default']?.()}

          <RouterLink to='/search' class={styles.aside_link}>
            <img src={icoSearch} alt='search' />
          </RouterLink>
        </header>

        <div style={{ height: `${size.height}px` }}></div>
      </>
    )
  },
})
